@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~@tailwindcss/custom-forms/dist/custom-forms.css";

#qrcode img{
  width: 100% !important;
  height: 100% !important;
}

.pay-btn {
  background-color: #49c265;
  color:white;
}

.pay-btn:active {
  background-color: #42ad5b;
}

.message:not(.top-swiping) {
  display: none;
  transform: translateY(-100%);
}

.message.top-swiping {
  animation-name: banner-in;
  animation-direction: forwards;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes banner-in {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
  }
}

.message.message-remove {
  -webkit-animation-name: MessageMoveOut;
  animation-name: MessageMoveOut;
  -webkit-animation-duration: .3s;
  animation-duration: .3s
}

@-webkit-keyframes MessageMoveOut {
  0% {
    max-height: 150px;
    padding: 8px;
    opacity: 1
  }
  to {
    max-height: 0;
    padding: 0;
    opacity: 0
  }
}

@keyframes MessageMoveOut {
  0% {
    max-height: 150px;
    padding: 8px;
    opacity: 1
  }
  to {
    max-height: 0;
    padding: 0;
    opacity: 0
  }
}
